<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <title>预览</title>
  <link href="css/player.css" rel="stylesheet" type="text/css" media="screen">
  <script src="js/jquery.js"></script>

<body>
<div class="loading" style="display: block">
  <p></p>
</div>
<div class="iosPlay"></div>
<div id="main" class="main wrapper">
  <div id="support-info" class="support-info hide">
    <h2>温馨提示</h2>
    <p>暂不支持使用您当前的浏览器进行播放 :-( </p>
  </div>
  <div id="stage">
    <div id="stage-inner" class="inner">
      <div class="play"></div>
    </div>
    <div class="return">
      <div class="backFull">返回</div>
    </div>
    <div class="player">
      <div class="buttons">
        <ul class="play-pause">
          <li class="play"><i></i></li>
          <li class="pause"><i></i></li>
          <li class="warn"></li>
        </ul>
        <div class="time">
          <em class="played">0:00</em>
          <div class="scrubber" id="scrubber">
            <div style="width: 0%;" class="progress"></div>
            <div style="width: 100%;" class="loaded"></div>
            <div class="timeShow">
              <span>00:00</span>
              <i class="timeArrow"></i>
            </div>
            <div class="scrubber-track">
              <div style="left:0%;" class="scrubber-draggable progress-tracker" id="drag"></div>
            </div>
          </div>
          <strong class="duration">0:00</strong>
        </div>
        <div class="volume">
          <span class="volumeBtn"></span>
          <div class="volumeMain">
            <div class="volumeBar">
              <div class="volumeLine"></div>
              <div class="volumePoint"></div>
            </div>
          </div>
        </div>
        <ul class="fullscreen"><a href="javascript:;" class="fullscreenBtn"></a></ul>
      </div>
      <div class="player-bg"></div>
    </div>
  </div>
  <div class="audio">
    <audio id="audio1">您的浏览器不支持audio标签</audio>
  </div>
  <span id="error" style="position:absolute;top:0;right:0;"></span>
  <span id="error1"></span>
</div>
<script>

</script>
<script type="text/javascript" src="js/draw.js"></script>
<script>
  $(".fullscreenBtn,.backFull").on("click",function(){ //控制全屏
    var isFullscreen = document.fullscreenEnabled ||

      window.fullScreen ||

      document.webkitIsFullScreen ||

      document.msFullscreenEnabled;

    if(!isFullscreen){
      var docElm = document.documentElement;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
      else if (docElm.msRequestFullscreen) {
        docElm = document.body; //overwrite the element (for IE)
        docElm.msRequestFullscreen();
      }
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
      $(".fullscreen").css({background:'url(images/returnFull.png) no-repeat center'})
      $(".return").show();
    }else{
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      }
      else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
      $(".fullscreen").css({background:'url(images/full.png) no-repeat center'})
      $(".return").hide();
    }

  });



  var barHeight =  $(".volumeBar").height();
  var audio = $('#audio1');
  $(".volumeBar").on('mousedown',function(ev){
    var offsetTop = $(".player")[0].offsetTop;
    var offsetY = offsetTop - ev.clientY;
    var percent = Math.max(Math.min(parseInt(offsetY/barHeight*100),100),0);
    $(".volumeLine").css({'height':percent+'%'})
    audio.volume = percent/100;
  })

  $(".volumeLine").on('mousedown',function(ev){
    var offsetTop = $(".player")[0].offsetTop;
    document.onmousemove = function (ev) {
      var offsetY = offsetTop - ev.clientY;
      var percent = Math.max(Math.min(parseInt(offsetY/barHeight*100),100),0);
      $(".volumeLine").css({'height':percent+'%'})
      audio.volume = percent/100;
    }
    document.onmouseup = function(ev){
      document.onmousemove = null
      document.onmouseup = null
    }
  })

</script>
<script>
  $(function(){
    canvasBegin();
  })
  $(window).resize(function(){
    pageLoad();
  });
  var audio = document.getElementById("audio1");


  //开始播放方法
  function pause() {
    clearTimeout(u);
    $(".play").hide();
    $(".pause").show();

    //重播时
    if (playNum == 2) {
      count = 0;
      zz = 0;
      clearCanvas();
      ex = 0;
    }
    YDrag();
    pauseNum = 1;
    playNum = 1;
    drawCircle();
    timeChange();
    audio.currentTime = ex;
    console.log('play')
    audio.play();
    $(".loading").hide();

  }

  //暂停播放方法
  function play() {
    zz = ex*1000;
    $(".pause").hide();
    $(".play").show();
    clearTimeout(u);
    for (var i = 0; i < myAryR.length; i++) {
      clearTimeout(myAryR[i]);
    }
    pauseNum = 0;
    console.log('pause')
    audio.pause();
  }
  $(".play").click(function () {
    pause();
  })
  $(".pause").click(function () {
    play();
  })

</script>
</body>
</html>
